<template>
  <div class="page" ref="page">
    <div class="me">
      <div class="user-image">
        <van-image
          width="100"
          height="100"
          radius="5"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          @click="toUser()"
        />
        <p>今夕何夕</p>
      </div>
      <div class="card-list">
        <div class="card" v-for="(card,index) in cardList" :key="index">
          <van-icon :name="card.icon" size="26" />
          <p class="card-name">{{card.name}}</p>
          <p class="card-desc">{{card.desc}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            cardList:[
                {
                    icon:"todo-list-o",
                    name:"代办",
                    desc:"新建代办事项"
                },
                 {
                    icon:"calender-o",
                    name:"日程",
                    desc:"查看近期行程安排"
                },
                 {
                    icon:"ecard-pay",
                    name:"邮件",
                    desc:"邮件收发"
                },
                 {
                    icon:"phone-o",
                    name:"电话",
                    desc:"快捷联系好友"
                },
                 {
                    icon:"send-gift-o",
                    name:"名片夹",
                    desc:"添加名片"
                },
                 {
                    icon:"bookmark-o",
                    name:"收藏",
                    desc:"文本图片链接语音"
                }
            ]
        }
    },
    mounted(){
      this.$store.commit("showTabBar");
    },
    updated(){
       let chatHeight = document.documentElement.clientHeight-50;
       this.$refs.page.style.height = chatHeight + "px";
    },
    methods:{
      toUser(){
        this.$router.push("/user")
      }
    }
};
</script>

<style lang="less" scoped>
.me {
  height: 100vh;
  .user-image {
    text-align: center;
    padding: 30px;
    p {
      font-weight: 600;
      padding: 10px;
    }
  }
  .card-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    padding-bottom: 60px;
    .card {
      width: 43%;
      height: 80px;
      background: #ffffff;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      p {
        padding-top: 5px;
      }
      .card-name {
        font-weight: 550;
      }
      .card-desc {
        font-size: 13px;
        color: gray;
      }
    }
  }
}
</style>
